<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>微信网页版</title>
		<!--只有ie可以用-->
		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
		<!--ie和火狐可以用-->
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<style type="text/css">
              body {
				background-image: url(img/web_wechat_login_bg31e225.jpg);
				background-size: 100%;     
			}
			
		</style>
		<link rel="stylesheet" type="text/css" href="css/wechat1.css" />
		<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
		<script src="js/jsontongxunlushuzu.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/diaoyongjsondejs.js" type="text/javascript"></script>
		<script src="js/shoucang.js" type="text/javascript"></script>
		<script src="js/pinyin_dict_firstletter.js" type="text/javascript"></script>
		<script src="js/pinyinUtil.js" type="text/javascript"></script>
		<script src="js/faqiliaotian.js" type="text/javascript"></script>
		
	</head>

	<body>

		<!--发起聊天-->
		<div class="faqiliaotian">
			<div class="faqishang">
				<div class="o1">
					<div class="oo1">发起聊天</div>
					<div class="oo2"><img src="img/cuohao.png" /></div>
				</div>
				<div class="o2">
					<div class="oo3">选择联系人</div>
					<div class="oo4">选择群聊</div>
				</div>
			</div>
			<!--选择联系人-->
			<div class="faqixia">
				<div id="xiaosanjiao">

				</div>
				<div class="shangshang">
					<div class="dasou">
						<div class="fangtouxiang">

						</div>
						<div class="fangdajing">
							<div class="imgs">
								<img src="img/fangdajing.png" />
							</div>
							<div class="sousuoneirong" contenteditable="true">
								搜索
							</div>
						</div>
					</div>
					<div class="zhongbu">
						<div class="zimu">
							A
						</div>
						<div class="lianxiren">
							<div class="yuanquan"><img src="img/yuanquan.png" /></div>
							<div class="face"><img src="img/2.jpg" /></div>
							<span id="nicheng">梦工厂</span>

						</div>
					</div>
				</div>

				<div class="xiaxia">
					<div class="queding">
						<span id="que">确定</span>
						<span id="kuohao"></span>

					</div>
				</div>
			</div>
			<!--选择群聊-->
			<div class="faqixia1">
				<div id="xiaosanjiao1"></div>
				<div class="qunliao">
					<span class="qunliaoface"><img src="img/touxiang3.jpg"/></span>
					<span class="qunliaoming">孤芳不自赏</span>

				</div>

			</div>
		</div>
		<!--表情-->
		<div id="biao">
			<div id="biaoshang">
				<div class="h1" id="weixinbiaoqing" style="background-color: white;">QQ表情</div>
				<div class="h1" id="tu" style="margin-left: 30px;">符号表情</div>
				<div class="h1" id="tusi" style="margin-left: 30px;"> 动画表情</div>
			</div>
			<div id="biaoqing">
				<img src="img/qqfacePanel31e225图标.png" />
			</div>
			<div id="tusiji">
				<span class="j1"><img src="biaoqingss/fei333.gif"/></span>
				<span class="j1"><img src="biaoqingss/fei334.gif"/></span>
				<span class="j1"><img src="biaoqingss/fei335.gif"/></span>
				<span class="j1"><img src="biaoqingss/fei336.gif"/></span>
				<span class="j1"><img src="biaoqingss/fei337.gif"/></span>
				<span class="j1"><img src="biaoqingss/fei338.gif"/></span>
				<span class="j1"><img src="biaoqingss/fei339.gif"/></span>
			</div>
			<div id="jszuode">
				<div class="tu1"><img id="tupian" src="tusijitusiji/IMG00000.bmp" /></div>
				<div class="tu1"><img id="tupian1" src="tusiji15/IMG00000.bmp" /></div>
				<div class="tu1"><img id="tupian2" src="tusiji01/IMG00000.bmp" /></div>
				<div class="tu1"><img id="tupian3" src="tusiji02/IMG00000.bmp" /></div>
				<div class="tu1"><img id="tupian4" src="tusiji03/IMG00000.bmp" /></div>
				<div class="tu1"><img id="tupian5" src="tusiji04/IMG00000.bmp" /></div>
				<div class="tu1"><img id="tupian6" src="tusiji05/IMG00000.bmp" /></div>
			</div>
		</div>

		<!--意见反馈-->
		<div class="yijian">
			<div class="cuohao">
				<span style="margin-left: 170px;">意见反馈</span><span id="cuohao" style="display: inline-block; float: right; margin-right: 10px;">×</span>
			</div>
			<div class="shuruyijian" contenteditable="true">

			</div>
			<div class="tijiao">
				<div class="xiaoxi">
					发送
				</div>
			</div>
		</div>
		<!--退出那栏的显示-->
		<div class="tuichu">
			<div class="z1" title="发起聊天" id="k11">
				<div class="k1" id="k111"><img src="img/发起聊天.png" /></div>
				<div class="k2" id="o1">发起聊天</div>
			</div>
			<div class="z1" title="关闭桌面通知" id="k12">
				<div class="k1" id="k112"><img src="img/桌面通知开.png" /></div>
				<div class="k2" id="o2">关闭桌面通知</div>
			</div>
			<div class="z1" title="关闭声音" id="k13">
				<div class="k1" id="k113"><img src="img/声音开.png" /></div>
				<div class="k2" id="o3">关闭声音</div>
			</div>
			<div class="z1" title="意见反馈" id="k14">
				<div class="k1" id="k114"><img src="img/意见反馈.png" /></div>
				<div class="k2" id="o4">意见反馈</div>
			</div>
			<div class="z1" title="退出" id="k15">
				<div class="k1" id="k115"><img src="img/退出.png" /></div>
				<div class="k2" id="o5">退出</div>
			</div>
		</div>
		<!--左上角点击头像显示隐藏的栏-->
		<div class="jibenxinxi">
			<div class="datouxiang">
				<img src="img/3.jpg" />
			</div>
			<div class="xiabu">
				<div class="x1">
					<div class="n1">玫瑰花的葬礼</div>
					<div class="n2"><img src="img/rentou.png" /></div>
					<div class="n3"><img src="img/xiaoxi.png" /></div>
				</div>
				<div class="x2">
					<p>备注： 都是你的错</p>
					<p style="margin-top: 5px;">地区：北京</p>
				</div>
			</div>
		</div>
		<!--不能发送内容为空的消息-->
		<div class="buneng">
			<img src="img/不能.png" />
		</div>
		<!--右上点击显示隐藏的栏-->
		<div class="xianshi">
			<div class="diyi">
				<img src="img/虚方框.png" />
			</div>
			<div class="dier">

			</div>
		</div>
		<!--总的框架-->
		<div id="zuiwaice">
			<div id="zuoce">
				<div class="zuoshang">
					<div class="touxiang"> <img src="img/3.jpg" style="width: 47px; height: 47px;" /></div>
					<div class="nicheng">愿君归来</div>
					<div class="xiala"><img src="img/QQ图片20170106004801.png" /> </div>
				</div>
				<div class="zhong">
					<div class="sousuo" style="float: left;">
						<div style="float: left;">
							<img src="img/QQ截图20170106004928.png" style="height: 30px;" />
						</div>
						<div class="shuru" contenteditable="true">

						</div>
					</div>
				</div>
				<div class="zhongxia">

					<div class="zx1" id="a1"><img src="img/QQ截图20170106005048.png" title="聊天" /></div>
					<div class="zx1" id="a2"><img src="img/QQ图片20170106005305.png" title="阅读" /></div>
					<div class="zx1" id="a3"><img src="img/QQ截图20170106005359.png" title="通讯录" /></div>
				</div>
				<!--左侧下方的自己做的滚动条的框架-->
				<div id="zijizuode">

					<!--以下为滚动条-->
					<div id="gundongtiao">
						<div class="huakuai"></div>
					</div>
					<!--第一个左侧下的div-->
					<div class="xia">
						<!--先写好样式用来参考-->
						<!--<div class="a1">
					<div class="b1">
						<img src="img/2.jpg"/>
					</div>
					<span class="c1">
						崔雨松
					</span>
				</div>
				<div class="a1">
					<div class="b1">
						<img src="img/2.jpg"/>
					</div>
					<span class="c1">
					    布依泽
					</span>
				</div>-->
					</div>

					<!--左侧收藏栏的内容-->
					<div class="sc">
						<!--<div class="ming">
                  		<div class="ff1">
                  			<div class="fff1">滴滴北京</div>
                  			<div class="fff2">13:45</div>	
                  			
                  		</div>
                 
                  	<div class="sscc">
                  	<div class="xiezi">我该何去何从</div>
                  	  <div class="zhao"> <img src="img/2.jpg"/></div>	
                  	</div>
                  	 	</div>  
                  	  	
                  	<div class="ming">
                  		<div class="ff1">
                  			<div class="fff1">滴滴北京</div>
                  			<div class="fff2">13:45</div>	
                  			
                  		</div>
                 
                  	<div class="sscc">
                  	<div class="xiezi">我该何去何从</div>
                  	  <div class="zhao"> <img src="img/2.jpg"/></div>	
                  	</div>
                  	 	</div>  -->

					</div>
					<div class="xia1">
						<!--<div class="aa1">
						<div class="bb1">
							<img src="img/2.jpg"/>
						</div>
						<p class="cc1">崔雨松ddddddd</p> <span class="shijian">15:20</span>
					  <p class="liaotian">
					  	   哦哦，你说的棒极了
					  </p>
					</div>
					
					<div class="aa1">
						<div class="bb1">
							<img src="img/2.jpg"/>
						</div>
						<p class="cc1">崔雨松 </p><span class="shijian">15:20</span>
					  <p class="liaotian">
					  	   哦哦，你说的棒极了
					  </p>
					</div>-->
					</div>
				</div>
			</div>
			<div class="youce">
				<div class="youshang">

				</div>
				<div class="youzhong">
					<img src="../img/img/backg.png" />
					<p class="weixuan">未选择聊天</p>
				</div>
			</div>
			<div class="youce1">
				<div class="youshang1">
					详细信息
				</div>
				<div class="youzhong1">
					<div class="zhongjian">
						<div class="tou1">

						</div>
						<div class="tou2">
							小眼睛
						</div>
						<div class="tou3">
							<span id="">备注：</span>
							<span id="beizhu"></span>

						</div>
						<div class="tou4">
							地区：中国
						</div>
						<div class="tou5">
							发消息
						</div>
					</div>
				</div>
			</div>
			<div class="youce2">
				<div class="youshang1">
					详细信息
				</div>
				<div class="uuu">
					<div class="fangtu">
						<img src="img/未选择聊天.png" />
					</div>
				</div>
			</div>
			<!--收藏的右栏-->
			<div class="shoucangzuida">
				<div id="shoucang12">
					<div class="shoucangshang">优步北京</div>
					<div class="shoucangshang1">...</div>
				</div>
				<div class="shoucangneirong">
					<iframe src="http://www.baidu.com" width="640px" height="580px" name="showshoucang"></iframe>
				</div>

			</div>

			<div class="youceliaotiankuang">
				<div class="youshang2">
					<span class="s1">乱世最难相许</span>
					<span id="">
			        	<img id="huantu" src="img/QQ图片20170106014241.png"/>	
			        </span>
				</div>
				<!--聊天内容的对话框-->
				<div class="youzhong2">
					<p id="zanshi" style="color: #CCCCCC; font-size: 14px; text-align: center; margin-top: 150px;">暂时没有新消息</p>
					<!--右幅的对话框-->
					<!--<div class="youfu">
						<div class="time">
							<div class="shijian1">20:15</div>
						</div>
						<div class="zijitouxiang">
							<img src="img/3.jpg" />
						</div>
						<div class="xiaosanjiaoyou">

						</div>
						<div class="liaotianneirongyou">
							君欲踏马归来滴

						</div>

					</div>-->
					<!--左浮的对话框-->

					<!--<div class="zuofu">
						<div class="time">
							<div class="shijian1">20:15</div>
						</div>
						<div class="bierentouxiang">
							<img src="img/2.jpg" />
						</div>
						<div class="liaotianneirongzuo">
							吹啊吹啊吹走我的梦
							<div class="xiaosanjiaozuo">

							</div>
						</div>
					</div>-->
				</div>
				<div class="youxia">
					<div class="bqdiv">
						<div class="d1"><img id="haolei" src="img/图层-10.png" title="表情" /></div>
						<div class="d1" style="margin-left: 10px;"><img src="img/图层-9.png" title="截屏" /></div>
						<div class="d1" style="margin-left: 10px;"><img src="img/图层-11.png" title="图片和文件" /></div>
					</div>
					<div class="liaotiandiv" contenteditable="true">

					</div>
					<div class="fasongdiv">
						<span class="anxia">按下Ctrl+Enter换行</span>
						<span class="fasong">发送</span>
					</div>
				</div>
			</div>

			<!--收藏的内容的框架-->

		</div>
		<input type="button" id="anniu" value="放大" />
		<input type="button" id="suoxiao" value="缩小" />
             <script src="js/zhuyedejs.js" type="text/javascript">
		
		</script>
	</body>

</html>